<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript库</title>
    <script src="https://lib.baomitu.com/lodash.js/latest/lodash.js"></script>
    <link rel="stylesheet" href="./style/common.css">
</head>
<body>
    <h1>实用工具库——Lodash示例</h1>
    <p class="msg"></p>
    <p>
        <button id="throttle">节流(throttle)</button>
        <button id="debounce">防抖(debounce)</button>
    </p>
    <p class="throttle"></p>
    <p class="debounce"></p>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            let msg = document.querySelector(".msg");

            let objects = [{a:1},{b:2}];
            let shallow = _.clone(objects);
            msg.innerHTML += `浅拷贝：${shallow[0]===objects[0]}<br>`;
            let deep = _.cloneDeep(objects);
            msg.innerHTML += `深度拷贝：${deep[0]===objects[0]}<br>`;

            let objArr = [{n:4},{n:2},{n:8},{n:6}];
            msg.innerHTML += `按指定迭代求平均值${_.meanBy(objArr,o=>o.n)}<br>`;
            msg.innerHTML += `按指定属性求平均值${_.meanBy(objArr,"n")}<br>`;

            let users=[
                {"user":"fred","age":48},
                {"user":"barnehy","age":36},
                {"user":"fred","age":40},
                {"user":"barnehy","age":34}
            ];

            console.log(_.sortBy(users,o=>o.user));
            console.log(_.sortBy(users,["user","age"]));

            //节流
            let throttle = document.querySelector(".throttle");
            document.getElementById("throttle").addEventListener("click",_.throttle(function(){
                console.log("throttle");
                throttle.innerHTML += `${new Date().toLocaleString()}<br>`;
            },5000));

            //防抖
            let debounce = document.querySelector(".debounce");
            document.getElementById("debounce").addEventListener("click",_.debounce(function(){
                console.log("debounce");
                debounce.innerHTML += `${new Date().toLocaleString()}<br>`;
            },5000));
        });
    </script>
</body>
</html>